<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			var sun = new Image();
			var moon = new Image();
			var earth = new Image();
			const mycanvas = document.getElementById('mycanvas');
			const ctx = mycanvas.getContext('2d');
			function init() {
				sun.src = "https://mdn.mozillademos.org/files/1456/Canvas_sun.png";
				moon.src = "https://mdn.mozillademos.org/files/1443/Canvas_moon.png";
				earth.src = "https://mdn.mozillademos.org/files/1429/Canvas_earth.png";
			}
			init();
			var count = 0;
			setInterval(() => {
				ctx.save();
				ctx.clearRect(0 , 0 , 600 , 600);
				ctx.save();
				ctx.fillStyle = 'black';
				ctx.fillRect(0 , 0 , 600 , 600);
				ctx.restore();
				ctx.translate(300 , 300);
				ctx.beginPath();
				ctx.strokeStyle = 'royalblue';
				ctx.arc(0 , 0 , 200 , 0 , Math.PI * 2 , true);
				ctx.stroke();
				ctx.closePath();
				// drawImage(图片 ， 坐标 ， 尺寸)
				ctx.drawImage(sun , -100 , -100 , 200 , 200);
				ctx.save();
				ctx.rotate(Math.PI / 18 * count);
				ctx.drawImage(earth , -15 , -215 , 30 , 30);
				ctx.restore();
				ctx.save();
				ctx.rotate(Math.PI / 18 * (count + 1));
				ctx.drawImage(moon , -5 , -205 , 10 , 10);
				ctx.restore();
				ctx.restore();
				count ++;
				if(count >= 36) {
					count = 0;
				}
			} , 100);
		</script>
	</body>
</html>
